<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <!-- 标题 -->
      <div>
        <img src="https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png" alt="" class="im" />
        <span>众投招标辅助管理系统</span>
      </div>
<<<<<<< HEAD
      <!-- <el-button type="info" @click="login">退出</el-button> -->
      <!-- 下拉框 -->
      <el-dropdown>
        <div class="imgs el-dropdown-link">
          <img src="../../assets/use_image.png" alt="" />
          <el-dropdown-menu slot="dropdown" class="select">
            <p @click="login">退出登录</p>
            <p @click="translate">修改密码</p>
          </el-dropdown-menu>
        </div>
        <p class="user">欢迎你:{{username}}</p>
=======
      <!-- 头像 -->
      <el-dropdown>
        <div class="img">
          <img src="../../assets/use_image.png" alt="">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
         <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="login">退出登入</el-dropdown-item>
          <el-dropdown-item @click.native="resetDialogVisible = true">重置密码</el-dropdown-item>
        </el-dropdown-menu>
>>>>>>> ba683ca (第八次提交)
      </el-dropdown>
    </el-header>
    <!-- 密码修改 -->
    <el-dialog title="修改密码" :visible.sync="modifyDialogVisible" width="50%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="passwords">
          <el-input v-model="ruleForm.passwords" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirm">
          <el-input v-model="ruleForm.confirm" placeholder="请确认密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" class="el-icon-refresh-right" @click="modifyDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '60px' : '210px'">
        <div class="toogle-button" @click="tooggleCollapse">
          <i v-if="!isCollapse" class="iconfont icon-shuangjiantou-zuo"></i>
          <i v-else class="iconfont icon-shuangjiantou-you"></i>
        </div>
        <!-- 侧边栏菜单区域 -->
        <el-menu background-color="#3E68D8" text-color="#FFF" active-text-color="#48D1CC" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
          <!-- 一级菜单-->
          <!-- index只接受字符串值 -->
          <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
            <!-- 一级菜单的模块区域  -->
            <template slot="title">
              <!-- 图标 -->
              <i :class="[iconsObj[item.id]]" class="el-nav-item"></i>
              <!-- 文本 -->
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item  :index="'/' + subItem.path" v-for="(subItem, index) in item.children" :key="index" @click="saveNavState('/' + subItem.path)">
              <!-- 图标 -->
              <i class="iconfont icon-fenlei4"></i>
              <!-- 文本 -->
              <span>{{ subItem.authName }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <div class="headers">
          <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/route' }">表格详情</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/approve' }">支出详情</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/expenditure'}">审批详情</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/role'}">角色管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/user'}">用户列表</el-breadcrumb-item>
      </el-breadcrumb>
        </div>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>

    <!-- 重置密码弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="resetDialogVisible"
      width="50%">
      <el-form ref="formRef" :rules="formRules" :model="form" label-width="80px">
        <el-form-item label="旧密码" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmReset">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 控制重置密码的显示与隐藏
      resetDialogVisible: false,
      // 重置表单数据
      form: {
        password: '',
        newPassword: '',
        confirmPassword: ''
      },
      // 重置表单数据验证规则对象
      formRules: {
        password: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }
        ]
      },

      menulist: [
<<<<<<< HEAD
        { id: 1, authName: '首页', children: [{ path: 'wineShop', authName: '首页详情' }] },
        { id: 2, authName: '项目管理', children: [{ path: 'route', authName: '表格详情' }] },
        { id: 3, authName: '支出', children: [{ path: 'approve', authName: '支出详情' }] },
        { id: 4, authName: '审批', children: [{ path: 'expenditure', authName: '审批详情' }] },
        { id: 5, authName: '系统管理', children: [{ path: 'role', authName: '角色管理' },
        {path:'user',authName:'用户列表'}]}
=======
        { id: 1, authName: '首页', path: 'wineShop' },
        { id: 2, authName: '项目管理', path: 'route' },
        { id: 3, authName: '支出', path: 'approve' },
        { id: 4, authName: '审批', path: 'expenditure' },
        { id: 5,  authName: '系统管理', path: 'sysmanager'}
>>>>>>> ba683ca (第八次提交)
      ],
      iconsObj: {
        1: 'iconfont icon-shouye',
        2: 'iconfont icon-yangqi',
        3: 'iconfont icon-gouwuchekong',
        4: 'iconfont icon-jiuyuanfuwu',
        5: 'iconfont iconfont icon-guanli'
      },
      // 不折叠
      isCollapse: false,
      activePath: '',
      modifyDialogVisible: false,
      ruleForm: {
        password: '',
        passwords: '',
        confirm: '',
      },
      rules: {
        password: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
        ],
        passwords: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
        ],
        confirm: [
          { required: true, message: '请输入确认的密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
        ],
      },
      username:'admin'
    }
  },
  created() {
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    tooggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    login() {
      this.$router.push('/login')
      this.$message.error('退出成功!!!')
    },
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    },
<<<<<<< HEAD
    // 下拉操作
    translate() {
      this.modifyDialogVisible = true
    },
    // 重置操作
    reset() {
      this.$refs.ruleForm.resetFields()
    },
=======
    // 重置密码事件
    confirmReset() {
      this.$refs.formRef.validate(valid => {
        if(!valid) return;
        if(this.form.newPassword === this.form.confirmPassword) {
          this.resetDialogVisible = false;
          // 重置密码后，需要重新登录
          this.login();
        } else {
          return this.$message.error('两次密码不相同，请重新输入')
        }
      })
    }
>>>>>>> ba683ca (第八次提交)
  },
}
</script>

<style scoped>
.home-container {
  height: 100%;
  box-sizing: border-box;
  padding-left: 0;
}
.el-header {
<<<<<<< HEAD
  background-color: #182344;
=======
  /* background: url('../../assets/header_bg.gif') repeat-x center; */
  background: #141B31;
>>>>>>> ba683ca (第八次提交)
  height: 50px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  color: white;
}

.el-header > div {
  display: flex;
  align-items: center;
}

.el-header > div > span {
  margin-left: 20px;
}
.img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  float: left;
  /* border: 1px solid red; */
}
.img img {
  width: 100%;
}
.img i {
  float: right;
  margin-top: -15px;
  margin-right: -10px;
}
.el-aside {
  background-color: #3E68D8;
<<<<<<< HEAD
}
.el-main {
  padding: 0;
=======
>>>>>>> ba683ca (第八次提交)
}
.el-aside .el-main {
  border-right: none;
  /* background-color: #eaedf1; */
}

.el-nav-item {
  margin-right: 10px;
<<<<<<< HEAD
  color:#fff;
=======
  color: #3E68D8;
>>>>>>> ba683ca (第八次提交)
}

.toogle-button {
  background-color: #67779d;
  height: 30px;
  line-height: 30px;
  font-size: 10px;
  color: #fff;
  text-align: center;
}
.el-menu {
  border-right: none;
}
el-menu-item {
  height: 30px;
}
.icon-fenlei4 {
  margin-right: 10px;
}
.imgs {
  width: 45px;
  height: 45px;
}
.imgs img {
  width: 100%;
  height: 100%;
}
/* 下拉 */
.select {
  width: 130px;
  text-align: center;
}
.select p {
  cursor: pointer;
  width: 110px;
  height: 30px;
  border-top: 1px solid #dfe2e7;
  border-bottom: 1px solid #dfe2e7;
  line-height: 30px;
  margin: 0 auto;
  padding: 5px;
  font-size: 15px;
  color: #b8c7da;
  cursor: pointer;
}
.select p:nth-child(2) {
  border-top: none;
}
.im{
  width: 30px;
  height: 30px;
}
.el-input {
  width: 500px !important;
}
.headers {
  cursor: pointer;
  width: 100%;
  height: 30px;
  margin-bottom: 15px;
  background-color: #fff;
  line-height: 30px;
  font-size: 15px;
}
.el-breadcrumb__inner is-link{
  font-weight: normal !important;
}
.user{
  font-size: 15px;
  color:#fff;
}
</style>
